<template>
  <el-dialog v-model="reportVisible"
             title="睡眠呼吸检测报告"
             align-center
             center
             class="custom-dialog"
             @close="handleClose">
    <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" @click="handlePageChange(index + 1)">
        <el-text :class="{ 'active': currentPage === index + 1 }" size="large">{{ item }}</el-text>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <el-text :class="{ 'active': currentPage === 8 }" size="large"></el-text>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="inner-card-container">
      <user-info-card v-if="currentPage === 1" :currentReportId="currentReportId" />
      <sleep-status-card v-if="currentPage === 2" :currentReportId="currentReportId" :enable-edit="enableEdit"/>
      <heart-rate-card v-if="currentPage === 3" :currentReportId="currentReportId" :enable-edit="enableEdit"/>
      <snore-card v-if="currentPage === 4" :currentReportId="currentReportId" :enable-edit="enableEdit"/>
      <breath-card v-if="currentPage === 5"  :currentReportId="currentReportId" :enable-edit="enableEdit"/>
      <body-card v-if="currentPage === 6" :currentReportId="currentReportId" :enable-edit="enableEdit"/>
      <diagnosis-record v-if="currentPage === 7" :currentReportId="currentReportId" :enable-edit="enableEdit"/>
    </div>
    <div class="pagination">
      <el-button type="primary" class="save-button" @click="updateReportState">保存</el-button>
    </div>
    <div v-if="visible" class="floating-buttons">
      <el-text class="floating-button-text" size="large">上一项</el-text>
      <div class="paging-button-container">
        <el-button @click="prev" class="paging-button" :type="'text'">
          <el-icon class="paging-button-icon">
            <ArrowUp />
          </el-icon>
        </el-button>
      </div>
      <div class="paging-button-container">
        <el-button @click="next" class="paging-button" :type="'text'">
          <el-icon class="paging-button-icon">
            <ArrowDown />
          </el-icon>
        </el-button>
      </div>
      <el-text class="floating-button-text" size="large">下一项</el-text>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import {
  ArrowUp,
  ArrowDown,
  ArrowRight
} from '@element-plus/icons-vue'
import report from '@/api/report';
import UserInfoCard from "@/components/cards/userInfoCard.vue";
import SleepStatusCard from "@/components/cards/sleepStatusCard.vue";
import HeartRateCard from "@/components/cards/heartRateCard.vue";
import SnoreCard from "@/components/cards/snoreCard.vue";
import BreathCard from "@/components/cards/breathCard.vue";
import BodyCard from "@/components/cards/bodyCard.vue";
import DiagnosisRecord from "@/components/cards/diagnosisRecord.vue";

const props = defineProps({
  visible: Boolean,
  currentReportId: Number,
  enableEdit: Boolean
});

const emit = defineEmits(['update:visible']);

const reportVisible = ref(props.visible);
const currentReportId = ref(props.currentReportId)
const enableEdit = ref(props.enableEdit)
const currentPage = ref(1);

watch(() => props.visible, (newVal) => {
  reportVisible.value = newVal;
});
watch(() => props.currentReportId, (newVal) => {
  currentReportId.value = newVal;
});
const breadcrumbItems = ["个人信息", "睡眠状态", "心率", "鼾声", "呼吸", "体位", "记录"];

const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};

const updateReportState = () => {
  const updateReportStateDto = {
    reportId: props.currentReportId,
    state: 1
  };
  report.updateState(updateReportStateDto)
      .then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("操作成功");
          emit('update:visible', false);
          getReportList();
        }
      })
      .catch((err) => {
        console.log(err);
      });
};

const prev = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const next = () => {
  if (currentPage.value < 7) {
    currentPage.value++;
  }
};

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="scss">
.report-dialog {
  height: 100vh;
}

.breadcrumb {
  margin-left: 5%;
  margin-bottom: 2vh;
  font-size: 1.5vh;
  font-weight: 600;
  cursor: pointer;
}

.inner-card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.inner-card {
  height: 100%;
}

.pagination {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

.save-button {
  margin-left: 10px;
  background-color: #04c1a5;
}

.floating-buttons {
  position: fixed;
  top: 50%;
  right: 20%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4vw;
}

.floating-button-text {
  color: white;
  font-weight: 700;
}

.paging-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5vh;
}

.paging-button {
  background-color: transparent;
  color: white;
}

.paging-button-icon {
  font-size: 4.5vw;
  color: #04c1a5;
}

.active {
  color: #04c1a5;
}

::v-deep .el-dialog__header {
  text-align: center;
}

::v-deep .el-dialog__title {
  color: #4CAF50;
  font-size: larger;
  font-weight: 600;
}

::v-deep .customer-table th {
  border: none;
}

::v-deep .customer-table td,
.customer-table th.is-leaf {
  border: none;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: green;
  color: #fff;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #04c1a5;
}
</style>
